<template>
  <div class="component-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="top-nav-bar" @click-left="$router.back()" fixed placeholder>
      <template #left>
        <van-icon name="arrow-left" color="#000" class="icon"/>
        <span>我的订单</span>
      </template>
    </van-nav-bar>
    <!-- 顶部标签页 -->
    <van-sticky :offset-top="50">
      <van-tabs v-model="active">
        <van-tab title="全部"></van-tab>
        <van-tab title="待支付"></van-tab>
        <van-tab title="待收货"></van-tab>
      </van-tabs>
    </van-sticky>
    <router-view :orderInfoArr="subOrderInfoArr" @getAllOrder="getAllOrder"></router-view>
  </div>
</template>

<script>
import { Tab, Tabs, Sticky, ActionSheet } from 'vant'
import AllOrder from '@/router/' 

export default {
  name: 'Order',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      active: 0,
      orderInfoArr: [],
    }
  },
  computed: {
    // 计算向子组件传递的数据
    subOrderInfoArr() {
      if (this.active === 0) {
        return this.orderInfoArr
      } else if (this.active === 1) {
        return this.orderInfoArr.filter(orderInfo=>{
          return orderInfo.orderStatus === 0
        })
      } else if (this.active === 2) {
        return this.orderInfoArr.filter(orderInfo=>{
          return orderInfo.orderStatus === 1
        })
      }
    },
  },
  methods: {
    // 获取订单
    getAllOrder() {
      // console.log(123);
      // 获取全部的订单信息
      this.req.post(
        'user/get/order/all/',
        {
          token: localStorage.getItem('token')
        }
      ).then(res=>{
        if (res.data.mark === 1) {
          this.orderInfoArr = res.data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      }, err=>{
        this.$toast.fail(err)
      })
    }
  },
  created() {
    this.active = this.$route.query.active
    this.getAllOrder()
  }
}
</script>

<style lang="less" scoped>
// 导航栏样式
.top-nav-bar {
  .icon {
    margin-right: 0.5rem;
    font-size: 1.5rem;
  }
  span {
    font-size: 1.25rem;
  }
}
</style>